<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Insert title here</title>
    <style type="text/css">
        .content {
            width: 643px;
            margin: 200px auto;
            text-align: center;
        }
\
        input[type='text'] {
            width: 530px;
            height: 40px;
            font-size: 14px;
        }

        input[type='button'] {
            width: 100px;
            height: 46px;
            background: #38f;
            border: 0;
            color: #fff;
            font-size: 15px
        }
        -=#show {8 6
            position: absolute;
            width: 535px;
            height: 100px;
            border: 1px solid #999;
            border-top: 0;
            display: none;
            text-align: left;
        }
    </style>
    <!--引入axios.js库-->
    <script src=" js/axios-0.18.0.js"></script>
</head>
<body>
<div class="content">
    <img alt="" src="img/logo.png"><br/><br/>
    <input type="text" name="word" id="word" onkeyup="method01()">
    <input type="button" value="搜索一下">
    <div id="show"></div>
</div>

<script type="text/javascript">
    /*
    * # 需求: 当用户在输入框每输完一个字,就应该有提示, 如果框中没字,就没有提示
    *  0. sql :
    *           select * from user where name like ?
    *               关键字%
    *  1. 前端
    *       1). 请求类型: 异步
    *       2). 技术选型: axios
    *       3). 事件:  onchange不好用
    *                  onkeyup 当键盘抬起的时候
    *       4). 请求地址: UserServlet
    *       5. 请求参数:  文本框输入的关键字
    *
    *
    *  2. 后端
    *       1). 接收请求
    *       2). 业务处理: 查询数据库
    *       3). 响应给浏览器
    *
    *  3. 前端
    *       1). 获取响应
    *       2). 显示数据
    *
    *
    * */
        function method01() {
            //首先拿到url虚拟路径的地址
            let url ="/searchServlet"

            //拿到文本框中的值
            let wordValue = document.getElementById("word").value;

            //获取id为show的div对象
            let showDiv = document.getElementById("show");

            //判断字符串是否为空
            if(wordValue){
                //有值,则将value值发送给服务器
                //拼接请求参数
                let param = `keyword=${wordValue}`;

                //异步请求
                axios.post(url,param)
                    .then(response=>{
                        console.log(response);
                        //拿到服务器发送的数据
                        let users= response.data;

                        //定义变量
                        let html="";

                        //遍历数组
                        for (let i = 0; i < users.length; i++) {
                            let userName = users[i].name;
                            //拼接用户名
                            html+=`<div>${userName}</div><br/>`;
                        }

                        showDiv.innerHTML=html;

                        //修改id名为show的div标签的样式
                        showDiv.style.display="block";
                    })
            }else{
                //没有值则不显示
                showDiv.style.display="none";
            }
        }
</script>
</body>
</html>